<template>
  <div class="hd Confirm">
    <div class="hd mt10">
      <img src="../../assets/yygh.png" alt="">
    </div>
    <!-- <search-bar></search-bar> -->
    <div class="content">
      <position>
        <router-link to="/yygh">预约挂号</router-link>
        &gt;
        <span class="last">"{{this.$route.query.key}}"的搜索结果</span>
      </position>

      <div class="border_content four-cornor-wrapper">
          <i class="l"></i>
          <i class="r"></i>
          <i class="t"></i>
          <i class="b"></i>
           <div ref="searchList" class="search-list" v-if="lists && lists.length > 0">
            <a href="javascript:;" v-for="list in lists" @click="goDoctorPage(list)" :key="list.doctorName">
              {{list.doctorName}} <small>{{list.speciality}}</small>
            </a>
          </div>
      </div>
    </div>


  </div>
</template>

<script>
import Position from '../../components/Position'
import SearchBar from '../../components/SearchBar'
import {commonAjax, ORG_ID, PLATFORM_PREFIX} from '../../api/api'
export default {
  data () {
    return {
      lists: []
    }
  },
  mounted () {
    document.body.scrollTop = document.documentElement.scrollTop = 0
    this.getData()
  },
  methods: {
    getData () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax(
        [ORG_ID, this.$route.query.key, 1], `${PLATFORM_PREFIX}.registrationService`,
        'queryDocter'
      ).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.body && res.data.body.length > 0) {
          this.lists = res.data.body
        }
      }).catch(err => {
        console.warn(err)
      })
    },
    confirmSubmit () {
      this.$router.replace('/yygh/pay')
    },
    goDoctorPage (doctor) {
      this.$router.push({
        path: '/yygh/doctor',
        query: {
          localDeptId: doctor.localDeptId,
          localDoctorId: doctor.localDoctorId
        }
      })
    }
  },
  components: {Position, SearchBar}
};
</script>

<style lang="less" scoped>
.search-list{
  padding: 20px;
  a{
    display: block;
    font-size: 16px;
    line-height: 3;
    border-bottom: 1px solid #eee;
    &:hover {
      background: #fbf3f1;
    }
    small {
      color:#333;
      font-size: 14px;
    }
  }
}
</style>
